<template>
    <div>
        <el-collapse v-model="activeName" accordion @change="handleChange">
            <el-collapse-item title="设备信息" name="1">
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    node-key="id"
                    highlight-current
                    default-expand-all
                    @node-click="handleNodeClick"
                ></el-tree>
            </el-collapse-item>
            <el-collapse-item title="楼宇信息" name="2">
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    node-key="id"
                    highlight-current
                    default-expand-all
                    @node-click="handleNodeClick"
                ></el-tree>
            </el-collapse-item>

            <el-collapse-item title="分组信息" name="3">
                <el-tree
                    :data="data"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    node-key="id"
                    highlight-current
                    default-expand-all
                ></el-tree>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
export default {
    name: "tree",
    data() {
        return {
            defaultProps: {
                children: "children",
                label: "label",
            },
            activeName: "1",
            data: [
                {
                    label: "一级 1",
                    children: [
                        {
                            label: "二级 1-1",
                            children: [
                                {
                                    label: "三级 1-1-1",
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 2",
                    children: [
                        {
                            label: "二级 2-1",
                            children: [
                                {
                                    label: "三级 2-1-1",
                                },
                            ],
                        },
                        {
                            label: "二级 2-2",
                            children: [
                                {
                                    label: "三级 2-2-1",
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 3",
                    children: [
                        {
                            label: "二级 3-1",
                            children: [
                                {
                                    label: "三级 3-1-1",
                                },
                            ],
                        },
                        {
                            label: "二级 3-2",
                            children: [
                                {
                                    label: "三级 3-2-1",
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    created() {},
    mounted() {},
    methods: {
        handleChange(val) {
            console.log(val);
        },
        handleNodeClick(data) {
            console.log(data);
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
</style>
